import React, { Component } from 'react';
import '../../styles/Mine.scss'
import { List } from 'antd-mobile';
import { BankcardOutline,ClockCircleOutline,CheckCircleOutline,FileOutline } from 'antd-mobile-icons';

class Mine extends Component {
    toCollection() {
        this.props.history.push('/collection');
    }
    render() {
        return (
            <div className='mine'>
                {/* 头像 */}
                <div className="mine-top">
                    <div className="avatar">
                        <img src="https://img0.baidu.com/it/u=2992051331,14496943&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350" alt="" />
                        <span>姓名</span>
                    </div>
                </div>
                {/* 收藏,积分,优惠券 */}
                <div className='data'>
                    <div className='data-item' onClick={()=>{this.toCollection()}}>
                        <span>1</span>
                        收藏
                    </div>
                    <div className='data-item'>
                        <span>0</span>
                        积分
                    </div>
                    <div className='data-item'>
                        <span>0</span>
                        优惠券
                    </div>
                </div>
                {/* 我的订单 */}
                <div className="order">
                    <div className='word'>
                        {/* <div className='left'>我的订单</div>
                        <div className='right'>查看全部订单</div> */}
                        <List.Item className='list-item' extra='查看全部订单'  onClick={()=>{}}>
                            我的订单
                        </List.Item>
                    </div>
                    <div className='order-content'>
                        <div className='order-content-item'>
                            <BankcardOutline className='icon'/>
                            待付款 
                        </div>
                        <div className='order-content-item'>
                            <ClockCircleOutline className='icon'/>
                            待发货
                        </div>
                        <div className='order-content-item'>
                            <CheckCircleOutline className='icon'/>
                            已发货
                        </div>
                        <div className='order-content-item'>
                            <FileOutline className='icon'/>
                            待评价
                        </div>
                    </div>
                </div>
                {/* 会员中心 */}
                <div className='vip'>
                    <List.Item className='list-item' onClick={() => { }}>
                        会员中心
                    </List.Item>
                </div>
                {/* 领券中心 */}
                <div className='about'>
                    <List.Item className='list-item' onClick={() => { }}>
                        领券中心
                    </List.Item>
                    <List.Item className='list-item' onClick={() => { }}>
                        我的评价
                    </List.Item>
                    <List.Item className='list-item' onClick={() => { }}>
                        收货地址
                    </List.Item>
                    <List.Item className='list-item' onClick={() => { }}>
                        我的客服
                    </List.Item>
                </div>
            </div>
        );
    }
}

export default Mine;